// 用来打包的

const path = require("path");


// 导入 把HTML页面生成到内存中的插件
const htmlWebpackPlugin = require("html-webpack-plugin")

const cleanPlugin = require("clean-webpack-plugin")

// 到入webpack这个模块
const webpack =require("webpack")

// 导入抽取CSS样式文件的插件
const extractTextPlugin =require("extract-text-webpack-plugin")

// 导入优化压缩css样式表的插件
const optimizeCssAssetsPlugin=require("optimize-css-assets-webpack-plugin")


// 使用Node中的语法，向外暴露了一个配置对象
module.exports = {
    entry: {
        app:path.join(__dirname,"./src/main.js"),//这是项目的入口文件
        vendors:["jquery"]//这是第三方包的名称

    },
    output: { //指定输出文件的配置
        path: path.join(__dirname, "./dist"), //指定文件的存放路径
        filename: "js/index.js" //指定输出文件的名称
    },
    plugins: [ //插件的数组
        new htmlWebpackPlugin({ //创建一个把HTML首页托管到内存中的插件
            template: path.join(__dirname, "./src/index.html"), //需要把哪个HTML页面作为模板复制一份托管到内存中
            filename: "index.html", //指定，将来在内存中辅助出来的页面，名称叫做index,html
            minify:{//表示提供压缩选项
                removeComments:true,//移除页面中的注释
                // collapseWhitespace:true,//合并空白字符
                removeAttributeQuotes:true,//移除属性节点上的引号
                

            }

        }),
        new cleanPlugin(["dist"]), //指定每次重新发布的时候，要先删除
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendors",
            filename:"js/vendors.js"//指定抽里出来的第三方包
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false//移除警告信息
            }
        }),
        new webpack.DefinePlugin({//此插件的作用，相当于在项目的全局，配置了一些全局可用的
            // 变量，将来，我们引用的第三方包中，比如Bue，会检查webpack中有没有提供process.env.NODE_ENV字段，
            // 如果有，并且字段名字为“production”，就表示生产发布环境，那么会移除不必要的Vue警告功能，并做其他优化
            "process.env.NODE_ENV":"production",
            "myVar":"1234"
        }),
        new extractTextPlugin("css/style.css"),//抽取CSS文件到单独的目录中
        // new optimizeCssAssetsPlugin()//自动压缩CSS
    ],
    module: { //用来配置非JS文件对应的loader的
        rules: [ //就是这些非JS文件和loader之间的对应关系
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback:"style-loader",
                    use:["css-loader"],
                    publicPath:"../"//表示 如果将来生成的样式中，包含路径，那么，需要自动在路径的前面加上“../”
                })
            }, //创建处理css文件的loader匹配规则

            // {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}//创建处理scss文件的loader匹配规则

            // 可以使用?limit=  来限制图片的大小，单位是字节
            // 如果图片大小 小于limit的话，会转为base64格式的图片，否则，不转换
            {
                test: /\.jpg|png|gif|bmp$/,
                use: ["url-loader?limit=2150&name=images/[hash:8]-[name].[ext]"]
            },

            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            }

        ]

    }
}